<template>
  <div class="course-card" :style="cardStyle" @click="handleClick">
    <button v-if="closeable" class="close-btn" @click.stop="handleClose">×</button>
    <div v-if="optional === 'N'" class="color-strip"></div>
    <div v-else class="triangle-corner"></div>

    <div class="top-section" :style="topSectionStyle">
      <h3 class="course-name">{{ name }}</h3>
    </div>
    <div class="bottom-section" :style="bottomSectionStyle">
      <span class="teacher-name">{{ teacher }}</span>
    </div>
    <div class="hover-overlay"></div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  name: string
  teacher: string
  color?: string
  height?: number
  closeable?: boolean
  optional: string
}

interface Emits {
  (e: 'click'): void
  (e: 'close'): void
}
const handleClose = (event: Event) => {
  event.stopPropagation()
  emit('close')
}
const props = withDefaults(defineProps<Props>(), {
  color: '#3498db',
  height: 100,
})

const emit = defineEmits<Emits>()

const topSectionHeight = computed(() => Math.floor((props.height * 2) / 3))
const bottomSectionHeight = computed(() => props.height - topSectionHeight.value)

const cardStyle = computed(() => ({
  height: `${props.height}px`,
  '--card-color': props.color,
}))

const topSectionStyle = computed(() => ({
  height: `${topSectionHeight.value}px`,
}))

const bottomSectionStyle = computed(() => ({
  height: `${bottomSectionHeight.value}px`,
}))

const stripStyle = computed(() => {})

const handleClick = () => {
  emit('click')
}
</script>

<style scoped>
.close-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 10;
}
.course-card:hover .close-btn {
  opacity: 1;
}

.close-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.1);
}
.course-card {
  position: relative;
  width: 100%;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  cursor: pointer;
  overflow: hidden;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.course-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.color-strip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--card-color);
  z-index: 3;
}

.triangle-corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 4;
}

.triangle-corner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 24px 0 0;
  border-color: var(--card-color);
  z-index: 5;
}

/* 上面2/3区域 */
.top-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.course-name {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  margin: 0;
  padding: 0 12px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 下面1/3区域 */
.bottom-section {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-top: 1px solid #f0f0f0;
}

.teacher-name {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

/* 简约悬停效果 */
.hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--card-color);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.course-card:hover .hover-overlay {
  opacity: 0.02;
}

/* 入场动画 */
.course-card {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
</style>
